<template>
	<view class="min100" style="padding-bottom:240rpx;">
		<view class="plr-30">
			<!-- 头部 -->
			<view class="topWrap white">
				<img :src="info.images" class="collectImg">
				<image src="../../static/preview.png" class="preImg" @click="preShow=true"></image>
				<view class="text-center topContent">
					<view class="size-34 mb-22">
						{{info.name}}
					</view>
					<view class="flex flex-start size-22" style="margin:0  245rpx;">
						<view class="flex flex-start  mr-16" style="width:200rpx">
							<view class="tipsLeft text-center ptb-7 radius-6" style="width:84rpx">
								限量
							</view>
							<view class="tipsRight red ptb-7 text-center"
								style="border-radius:0 6rpx 6rpx 0;width:116rpx">
								{{info.stock}}份
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flex flex-start bg plr-30 ptb-30 size-24 white mb-30">
				<image :src="info.head_image" class="userImg mr-20"></image>
				<view class="">
					<view class="">
						拥有者
					</view>
					<view class="mt-10 white">
						{{info.nick_name}}
					</view>
				</view>
			</view>
			<!-- 介绍 -->
			<view class="radius-20 bg mt-30 plr-30 ptb-30">
				<view class="flex flex-between">
					<view class="white size-22">
						您可能抽到以下商品中的1个
					</view>
				</view>
				<empty v-if=" info.goods.length==0"></empty>
				<view class="" v-else>
					<view class="flex white ptb-20 flex-between" style="border-bottom:1rpx solid #515151"
						v-for="(item,index) in info.goods" :key="index">
						<view class="flex">
							<image style="width:70rpx;height:70rpx;border-radius: 50%;" :src="item.image" mode="">
							</image>
							<view class="ml-20">
								<view class="mb-20 bold white">
									{{item.name}}
								</view>
								<view>
									价值：<text class="red">￥{{item.price}}</text>
								</view>
							</view>
						</view>
						<view class="">
							概率：{{item.rate}}%
						</view>
					</view>
				</view>
			</view>
			<!-- 介绍 -->
			<view class="radius-20 bg mt-30 plr-30 ptb-30">
				<view class="mb-30 size-30 white">
					作品故事
				</view>
				<view class="white infoWrap" v-html="info.content">

				</view>
			</view>
			<view class="radius-20 bg mt-30 plr-30 ptb-30">
				<view class="mb-30 size-30 white">
					购买须知
				</view>
				<view class="white infoWrap" v-html="info.buy_content">
			
				</view>
			</view>
		</view>
		<view class="btmWrap flex flex-between pb-60 plr-30">
			<view class="white size-50 bold">
				￥{{info.price}}
			</view>
			<view class="">
				<button class="mtb-30 buyBtn" hover-class="none" :disabled="btnDisabled" @click="toBuy">立即购买</button>
			</view>
		</view>
		<!-- 预览图片 -->
		<u-popup v-model="preShow" mode='center' border-radius='20'>
			<view>
				<img :src="info.images" class="collectPreImg">
			</view>
		</u-popup>
	</view>
</template>

<script>
	import empty from "../../components/empty.vue"
	export default {
		components: {
			empty
		},
		data() {
			return {
				btnDisabled: false,
				preShow: false,
				users_box_id: '',
				info: {
					goods: []
				}
			}
		},
		onLoad(options) {
			this.users_box_id = options.users_box_id;
			this.$http('api/trade/boxDetail', {
				users_box_id: this.users_box_id
			}).then(res => {
				this.info = res;
			})
		},
		methods: {
			// 购买
			toBuy() {
				this.btnDisabled = true;
				this.$http('api/orders/tradeBox', {
					users_box_id: this.users_box_id
				}).then(res => {
					this.btnDisabled = false;
					uni.navigateTo({
						url: '../pay/boxPay?order_id=' + res.order_id
					})
				})
			},
			// 复制
			copyAddress(val) {
				// #ifdef APP-PLUS
				uni.setClipboardData({
					data: this.val,
					success: function() {
						uni.hideToast()
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '复制成功',
									icon: 'none'
								})
							}
						});
					}
				});
				// #endif
				// #ifdef H5
				let that = this;
				this.$copyText(val).then(function(e) {
					uni.showToast({
						title: "复制成功!",
						icon: "none"
					})
				}, function(e) {
					uni.showToast({
						title: "复制失败!",
						icon: "none"
					})
				})
				// #endif
			},
		}
	}
</script>

<style lang="less" scoped>
	.userImg {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}


	.btmWrap {
		position: fixed;
		z-index: 10;
		width: 100%;
		bottom: 0;
		background: #040404;
	}

	.buyBtn {
		font-size: 28rpx;
		color: #040404;
		line-height: 80rpx;
		height: 80rpx;
		background: #44ACFF;
		border-radius: 40rpx;
		width: 210rpx;
	}

	.tipsLeft {
		background: #44ACFF;
		color: #2f2f2e;
	}

	.collectImg {
		width: 75%;
		display: block;
		margin: 0 auto;
		height: auto;
	}

	.topWrap {
		background: url(../../static/detailsBg.png) 0 0 no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 926rpx;
		position: relative;
		padding-top: 121rpx;
	}

	.infoWrap {
		::v-deep  img {
			width: 100% !important;
			height: auto;
		}
	}

	.topContent {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 30rpx;
		z-index: 10;
		width: 100%;
		text-align: center;
	}
</style>
